<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<div class="container">
	<ul class="breadcrumb" style="margin-bottom: 10px;">
		<li><a href="home">Trang chủ</a> <span class="divider">/</span></li>
		<c:if test="${title2!=null }">
			<li><a href="book.do?tpid=${menu1.topicId}&trang=1&btt=${requestScope.soBookTrenTrang}&kieuSort=${requestScope.kieuSapXep}"><c:out value="${title1 }"></c:out></a> <span class="divider">/</span></li> 
			<li class="active"><c:out value="${title2 }"></c:out></li>
		</c:if>
		<c:if test="${title2==null }">
			<li class="active"><c:out value="${title1 }"></c:out></li>
		</c:if>
	</ul>
		<div class="menuleft">
	
		<c:if test="${menu1!=null }">
			<div  class="my_sub_menu" style="width: 200px;">
       			 <div class="header">Menu</div>        		
				<ul>
						<li id="header"><a  href="book.do?tpid=${menu1.topicId}&trang=1&btt=${requestScope.soBookTrenTrang}&kieuSort=${requestScope.kieuSapXep}"><c:out value="${menu1.topicName }"></c:out></a></li>
						<c:if test="${lmenu2!=null }">
							<c:forEach var="menu" items="${lmenu2 }">
								<c:if test="${menu2.topicId ==menu.topicId }">
									<li id="active"><c:out value="${menu.topicName }"></c:out></li>
								</c:if>
								<c:if test="${menu2.topicId !=menu.topicId }">
									<li><a href="book.do?&tpid=${menu.topicId}&btt=${requestScope.soBookTrenTrang}&kieuSort=${requestScope.kieuSapXep}&trang=1"><c:out value="${menu.topicName }"></c:out></a></li>
								</c:if>					
							</c:forEach>
						</c:if>
				</ul>	
			</div>	
			<br>
		</c:if>
		
		<div  class="my_menu" style="width:200px;">
        	<div class="header">Menu</div>
			<ul style="margin-top:0px;margin-bottom:2px;">
                <c:forEach var="menu" items="${requestScope.lMenu1 }">
					<li><a href="book.do?tpid=${ menu.topicId}&trang=1&slbooktt=${requestScope.soBookTrenTrang}&kieuSort=${requestScope.kieuSapXep}"><c:out value="${menu.topicName }"></c:out></a></li>	
				</c:forEach>	                  
            </ul>
		</div>	
	</div>
	<div class="main_content">
		<div style="width:100%;float:left;">
			<div style="float:left;width:500px;">
				<div style="float:left;width:270px;">
					<label style="width:70px;margin-top:26px;font-size:16px;font-weight:bold;">Xếp theo</label>
					 <form style="float:right;margin-top:-28px;margin-right:20px;" action="${Servlet}&trang=1" method="POST">
					    	<select style="width:170px;" name="kieuSort"  onchange='submit()' >
					    	<c:set var="booktt" value="${requestScope.soBookTrenTrang }"></c:set>
								<option value="1" <c:if test="${kieuSort==1 }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="Tên sách (từ A->Z)"></c:out></option>
								<option value="2" <c:if test="${kieuSort==2 }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="Tên sách (từ Z->A)"></c:out></option>
								<option value="3" <c:if test="${kieuSort==3 }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="Giá bán(Tăng dần)"></c:out></option>
								<option value="4" <c:if test="${kieuSort==4 }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="Giá bán(Giảm dần)"></c:out></option>
								<option value="5" <c:if test="${kieuSort==5 }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="Ngày xuất bản(tăng dần)"></c:out></option>
								<option value="6" <c:if test="${kieuSort==6 }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="Ngày xuất bản(giảm dần)"></c:out></option>
					   		 </select>
					  </form>
				</div>
				<div style="float:right;width:230px;">
					<label  style="width:170px;margin-top:26px;float:left;font-size:16px;font-weight:bold;">Số sản phẩm hiển thị</label>
					 <form style="display:inline;width:60px;float:left;margin-top:23px;" action="${Servlet}&trang=1" method="POST">
					    	<select style="width:60px;" name="slbooktt"  onchange='submit()' >
					    	<c:set var="booktt" value="${requestScope.soBookTrenTrang }"></c:set>
								<c:forEach var="i" begin="1" end="5">
									<option value="${ i*booktt }" <c:if test="${i*booktt==slbooktt }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="${ i*booktt }"></c:out></option>
								</c:forEach>		
					   		 </select>
					  </form>
				</div>
			</div>
			<div style="float:right;margin:3px;width:430px;">
				<label style="width:50px;margin-top:23px;float:left;font-size:16px;font-weight:bold;">Trang</label>
				<div class="pagination" style="display:inline;width:380px;float:left;">
					<ul>

						<c:choose>
							<c:when test="${trangHienTai > 1 }">
								<li><a
									href="${Servlet}&trang=${trangHienTai - 1}&btt=${slbooktt}">«</a></li>
							</c:when>
							<c:otherwise>
								<li><a href="#">«</a></li>
							</c:otherwise>
						</c:choose>
						<!-- do dai pagination -->
						<c:choose>
							<c:when test="${tongSoTrang <= 6}">
								<c:forEach var="i" begin="1" end="${tongSoTrang}"
									step="1">
									<c:choose>
										<c:when test="${trangHienTai == i }">
											<li class="active"><a
												href="${Servlet}&trang=${i}&btt=${slbooktt}">${i}
											</a></li>
										</c:when>
										<c:otherwise>
											<li><a
												href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
											</a></li>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</c:when>
							<c:otherwise>
								<c:choose>
									<c:when test="${trangHienTai <= 3 }">
										<!--  khi page hiện tại là 1 trong 2 page đầu -->
										<c:forEach var="i" begin="1" end="5" step="1">
											<c:choose>
												<c:when test="${trangHienTai == i }">
													<li class="active"><a
														href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
													</a></li>
												</c:when>
												<c:otherwise>
													<li><a
														href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
													</a></li>
												</c:otherwise>
											</c:choose>
										</c:forEach>
										<li><a>...</a></li>
										<li><a
											href="${Servlet}&trang=${tongSoTrang}&slbooktt=${slbooktt}">${tongSoTrang}
										</a></li>
									</c:when>
									<c:when
										test="${trangHienTai >= tongSoTrang - 1 }">
										<!--  khi page hiện tại là 1 trong 2 page cuối -->

										<li><a
											href="${Servlet}&trang=${1}&slbooktt=${slbooktt}">1
										</a></li>
										<li><a>...</a></li>
										<c:forEach var="i" begin="${ tongSoTrang - 4}"
											end="${ tongSoTrang}" step="1">
											<c:choose>
												<c:when test="${trangHienTai == i }">
													<li class="active"><a
														href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
													</a></li>
												</c:when>
												<c:otherwise>
													<li><a
														href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
													</a></li>
												</c:otherwise>
											</c:choose>
										</c:forEach>
									</c:when>
									<c:otherwise>
										<c:choose>
											<c:when
												test="${ trangHienTai + 4 <= tongSoTrang }">
												<li><a
													href="${Servlet}&trang=${1}&slbooktt=${slbooktt}">1
												</a></li>
												<li><a>...</a></li>
												<c:forEach var="i" begin="${ trangHienTai - 1}"
													end="${ trangHienTai + 2}" step="1">
													<c:choose>
														<c:when test="${trangHienTai == i }">
															<li class="active"><a
																href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
															</a></li>
														</c:when>
														<c:otherwise>
															<li><a
																href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
															</a></li>
														</c:otherwise>
													</c:choose>
												</c:forEach>

												<li><a>...</a></li>
												<li><a
													href="${Servlet}&trang=${tongSoTrang}&slbooktt=${slbooktt}">${tongSoTrang}
												</a></li>
											</c:when>
											<c:otherwise>
												<li><a
													href="${Servlet}&trang=${1}&slbooktt=${slbooktt}">1
												</a></li>
												<li><a>...</a></li>
												<c:forEach var="i" begin="${ tongSoTrang - 4}"
													end="${ tongSoTrang}" step="1">
													<c:choose>
														<c:when test="${trangHienTai == i }">
															<li class="active"><a
																href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
															</a></li>
														</c:when>
														<c:otherwise>
															<li><a
																href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
															</a></li>
														</c:otherwise>
													</c:choose>
												</c:forEach>
											</c:otherwise>
										</c:choose>
									</c:otherwise>

								</c:choose>
							</c:otherwise>
						</c:choose>

						<!-- do dai pagination -->
						<c:choose>
							<c:when
								test="${trangHienTai < tongSoTrang }">
								<li><a
									href="${Servlet}&trang=${trangHienTai + 1}&slbooktt=${slbooktt}">»</a></li>
							</c:when>
							<c:otherwise>
								<li><a href="#">»</a></li>
							</c:otherwise>
						</c:choose>

					</ul>
				</div>
			</div>
		</div>
		<!-- noi dung chinh  -->
		<div style="width:100%; height:auto;float:left;">
			<div><h3>Danh sách</h3></div>
			<c:forEach var="book" items="${lb }">
				<div class="item_book inline">
					<a href="ChiTietSach.do?bookid=${book.bookId }"><img alt="80x80" src="${book.imageUrl }"  style="width:180px;height:180px;"></a>
					<div class="myrow"><a href="ChiTietSach.do?bookid=${book.bookId }" title="${book.name }"><c:out value="${book.name }"></c:out></a></div>
					<c:if test="${book.author.name != ''}"><div class="myrow">Tác Giả: <a title="${book.author.name }" href="TacGia.do?tacgiaid=${book.author.authorId}&trang=1&slbooktt=${requestScope.soBookTrenTrang}&kieuSort=${requestScope.kieuSapXep}"><c:out value="${book.author.name }"></c:out></a></div></c:if>
					<c:if test="${ book.translator.name != ''}"><div class="myrow">Người dịch: <a title="${book.translator.name }" href="DichGia.do?dichgiaid=${book.translator.translatorId}&trang=1&slbooktt=${requestScope.soBookTrenTrang}&kieuSort=${requestScope.kieuSapXep}"><c:out value="${book.translator.name }"></c:out></a></div></c:if>
					<div  class="myrow">Giá: <c:out value="${book.price }"></c:out> VND</div>
				</div>
			</c:forEach>
		</div>
		<br>
		<!-- ket thuc noi dung chinh -->
		<div style="width:100%;float:left;">
			<div style="float:left;width:500px;">
				<div style="float:left;width:270px;">
					<label style="width:70px;margin-top:26px;font-size:16px;font-weight:bold;">Xếp theo</label>
					 <form style="float:right;margin-top:-28px;margin-right:20px;" action="${Servlet}&trang=1" method="POST">
					    	<select style="width:170px;" name="kieuSort"  onchange='submit()' >
					    	<c:set var="booktt" value="${requestScope.soBookTrenTrang }"></c:set>
								<option value="1" <c:if test="${kieuSort==1 }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="Tên sách (từ A->Z)"></c:out></option>
								<option value="2" <c:if test="${kieuSort==2 }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="Tên sách (từ Z->A)"></c:out></option>
								<option value="3" <c:if test="${kieuSort==3 }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="Giá bán(Tăng dần)"></c:out></option>
								<option value="4" <c:if test="${kieuSort==4 }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="Giá bán(Giảm dần)"></c:out></option>
								<option value="5" <c:if test="${kieuSort==5 }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="Ngày xuất bản(tăng dần)"></c:out></option>
								<option value="6" <c:if test="${kieuSort==6 }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="Ngày xuất bản(giảm dần)"></c:out></option>
					   		 </select>
					  </form>
				</div>
				<div style="float:right;width:230px;">
					<label  style="width:170px;margin-top:26px;float:left;font-size:16px;font-weight:bold;">Số sản phẩm hiển thị</label>
					 <form style="display:inline;width:60px;float:left;margin-top:23px;" action="${Servlet}&trang=1" method="POST">
					    	<select style="width:60px;" name="slbooktt"  onchange='submit()' >
					    	<c:set var="booktt" value="${requestScope.soBookTrenTrang }"></c:set>
								<c:forEach var="i" begin="1" end="5">
									<option value="${ i*booktt }" <c:if test="${i*booktt==slbooktt }"><c:out value="selected=\"selected\""></c:out></c:if> ><c:out value="${ i*booktt }"></c:out></option>
								</c:forEach>		
					   		 </select>
					  </form>
				</div>
			</div>
			<div style="float:right;margin:3px;width:430px;">
				<label style="width:50px;margin-top:23px;float:left;font-size:16px;font-weight:bold;">Trang</label>
				<div class="pagination" style="display:inline;width:380px;float:left;">
					<ul>

						<c:choose>
							<c:when test="${trangHienTai > 1 }">
								<li><a
									href="${Servlet}&trang=${trangHienTai - 1}&btt=${slbooktt}">«</a></li>
							</c:when>
							<c:otherwise>
								<li><a href="#">«</a></li>
							</c:otherwise>
						</c:choose>
						<!-- do dai pagination -->
						<c:choose>
							<c:when test="${tongSoTrang <= 6}">
								<c:forEach var="i" begin="1" end="${tongSoTrang}"
									step="1">
									<c:choose>
										<c:when test="${trangHienTai == i }">
											<li class="active"><a
												href="${Servlet}&trang=${i}&btt=${slbooktt}">${i}
											</a></li>
										</c:when>
										<c:otherwise>
											<li><a
												href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
											</a></li>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</c:when>
							<c:otherwise>
								<c:choose>
									<c:when test="${trangHienTai <= 3 }">
										<!--  khi page hiện tại là 1 trong 2 page đầu -->
										<c:forEach var="i" begin="1" end="5" step="1">
											<c:choose>
												<c:when test="${trangHienTai == i }">
													<li class="active"><a
														href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
													</a></li>
												</c:when>
												<c:otherwise>
													<li><a
														href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
													</a></li>
												</c:otherwise>
											</c:choose>
										</c:forEach>
										<li><a>...</a></li>
										<li><a
											href="${Servlet}&trang=${tongSoTrang}&slbooktt=${slbooktt}">${tongSoTrang}
										</a></li>
									</c:when>
									<c:when
										test="${trangHienTai >= tongSoTrang - 1 }">
										<!--  khi page hiện tại là 1 trong 2 page cuối -->

										<li><a
											href="${Servlet}&trang=${1}&slbooktt=${slbooktt}">1
										</a></li>
										<li><a>...</a></li>
										<c:forEach var="i" begin="${ tongSoTrang - 4}"
											end="${ tongSoTrang}" step="1">
											<c:choose>
												<c:when test="${trangHienTai == i }">
													<li class="active"><a
														href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
													</a></li>
												</c:when>
												<c:otherwise>
													<li><a
														href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
													</a></li>
												</c:otherwise>
											</c:choose>
										</c:forEach>
									</c:when>
									<c:otherwise>
										<c:choose>
											<c:when
												test="${ trangHienTai + 4 <= tongSoTrang }">
												<li><a
													href="${Servlet}&trang=${1}&slbooktt=${slbooktt}">1
												</a></li>
												<li><a>...</a></li>
												<c:forEach var="i" begin="${ trangHienTai - 1}"
													end="${ trangHienTai + 2}" step="1">
													<c:choose>
														<c:when test="${trangHienTai == i }">
															<li class="active"><a
																href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
															</a></li>
														</c:when>
														<c:otherwise>
															<li><a
																href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
															</a></li>
														</c:otherwise>
													</c:choose>
												</c:forEach>

												<li><a>...</a></li>
												<li><a
													href="${Servlet}&trang=${tongSoTrang}&slbooktt=${slbooktt}">${tongSoTrang}
												</a></li>
											</c:when>
											<c:otherwise>
												<li><a
													href="${Servlet}&trang=${1}&slbooktt=${slbooktt}">1
												</a></li>
												<li><a>...</a></li>
												<c:forEach var="i" begin="${ tongSoTrang - 4}"
													end="${ tongSoTrang}" step="1">
													<c:choose>
														<c:when test="${trangHienTai == i }">
															<li class="active"><a
																href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
															</a></li>
														</c:when>
														<c:otherwise>
															<li><a
																href="${Servlet}&trang=${i}&slbooktt=${slbooktt}">${i}
															</a></li>
														</c:otherwise>
													</c:choose>
												</c:forEach>
											</c:otherwise>
										</c:choose>
									</c:otherwise>

								</c:choose>
							</c:otherwise>
						</c:choose>

						<!-- do dai pagination -->
						<c:choose>
							<c:when
								test="${trangHienTai < tongSoTrang }">
								<li><a
									href="${Servlet}&trang=${trangHienTai + 1}&slbooktt=${slbooktt}">»</a></li>
							</c:when>
							<c:otherwise>
								<li><a href="#">»</a></li>
							</c:otherwise>
						</c:choose>

					</ul>
				</div>
			</div>
		</div>
	 </div>
</div>